<script lang="ts" setup>
import Aside from "@/components/Black/Aside.vue";
import LatestNewsTwo from "@/components/Index/Latest-News-Two.vue";
import LatestNewsThree from "@/components/Index/Latest-News-Three.vue";
import Hero from "@/components/Index/Hero.vue";

import { IndexShowData } from "@/api/interface";
import { computed, onMounted, ref, watch } from "vue";

//接收数据
export interface Props {
  data: IndexShowData[];
}
const props = defineProps<Props>();

//存储数据
const hero = ref<IndexShowData[]>([]);
const two = ref<IndexShowData[] | never[]>([]);
const three = ref<IndexShowData[] | never[]>([]);

//watch(
//  () => props.data,
//  (newVal) => {
//    //hero.value = newVal.slice(0, 1);
//    two.value = newVal.slice(1, 5);
//    three.value = newVal.slice(5, 12);
//  }
//);
const a = computed(() => {
  return props.data.slice(0, 1);
});
const b = computed(() => {
  return props.data.slice(1, 5);
});
const c = computed(() => {
  return props.data.slice(5, 12);
});
</script>

<template>
  <section class="everdayfeed">
    <Aside></Aside>
    <div class="section-content">
      <h2 class="section-head">最新消息</h2>

      <Hero :data="a"></Hero>

      <LatestNewsTwo :data="b"></LatestNewsTwo>

      <LatestNewsThree :data="c"></LatestNewsThree>
    </div>
  </section>
</template>

<style lang="less" scoped></style>
